<template>
  <div>
    <el-dialog
      class="base-dialog"
      :custom-class="'panna-dialog_big'"
      :title="title"
      align="left"
      :append-to-body="true"
      :visible.sync="innerDialogFormVisible"
      :before-close="handleClose"
    >
      <p slot="title">{{ title }}</p>
      <div>
        <el-row>
          <el-col :span="12">
            <span>样品编号:{{ form.sampleNum }}</span>
          </el-col>
          <el-col :span="12">
            <span>样品名称:{{ form.sampleName }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span>受检单位:{{ form.unit }}</span>
          </el-col>
          <el-col :span="12">
            <span>产品标准:{{ form.productStandard }}</span>
          </el-col>
        </el-row>
        <el-table
          :data="form.tableData"
          style="width: 100%"
          @row-dblclick="dbclick"
        >
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            prop="instrumentName"
            label="设备名称"
            min-width="120"
          />
          <el-table-column
            prop="instrumentNum"
            label="设备编号"
            min-width="120"
          />
          <el-table-column
            prop="instrumentModel"
            label="设备型号"
            min-width="120"
          />
          <el-table-column prop="instrumentIP" label="设备IP" min-width="120" />
          <el-table-column
            prop="dataCaptureTime"
            label="采集时间"
            sortable
            min-width="120"
          />
          <el-table-column prop="name" label="采集名称" min-width="120" />
          <el-table-column prop="result" label="采集结果" min-width="120" />
          <el-table-column label="操作" width="140">
            <template slot-scope="{ row }">
              <div class="base-table-operation">
                <el-link type="primary" @click="look(row)">查看表单</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="base-dialog-footer">
          <!--分页-->
          <BasePagination
            :total="total"
            :current-page="pageInfo.pageIndex"
            :page-count="pageCount"
            @changePage="changePage"
            @sizeChange="sizeChange"
          />
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { DetailList } from "../../api/ModuleDataCapture";
export default {
  name: "DataCaptureDialog",
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      pageCount: 0,
      total: 0,
      title: "数据明细",
      innerDialogFormVisible: false,
      form: {
        tableData: [],
        sampleNum: "",
        sampleName: "",
        unit: "",
        productStandard: "",
      },
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.form = this.rowData;
    this.getList();
  },
  methods: {
    getList() {
      var idList = this.rowData.dataCaptureInstrumentIdList;
      var data = {
        idList: idList,
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
      };
      DetailList(data).then((res) => {
        this.form.tableData = res.data.dataList;
        this.total = res.data.total;
        this.pageCount = res.data.dataList.length;
      });
    },
    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
    // 关闭弹框
    handleClose() {
      this.closeDialog();
    },
    // 查看详情
    look(row) {
      const eleLink = document.createElement("a");
      eleLink.download = row.fileName;
      eleLink.href = row.reportPath;
      eleLink.target = "_blank";
      eleLink.click();
      eleLink.remove();
    },
    // 双击行
    dbclick(row) {
      this.look(row);
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      // 清空数据
      this.$emit("closeSampleReceivingDialog");
      this.tableData = [];
      this.cancel();
    },
  },
};
</script>
